<script>
import {createEditor, createToolbar} from '@wangeditor/editor'

export default {
  props: {
    editorKey: {
      type: String,
      default: Math.ceil(Math.random() * 10000)
    },
  },
  data() {
    return {
      toolbar: null,
    }
  },
  mounted() {
    // const vm = this;
    const editor = createEditor({
      selector: '#editor-container' + this.editorKey,
      html: '',
      config: {
        placeholder: 'Type here...',
        onChange: (editor) => {
          const html = editor.getHtml()
          this.$emit('update:value', html)
          // 也可以同步到 <textarea>
        }
      },
      mode: 'simple', // or 'simple'
    })
    this.toolbar = createToolbar({
      editor,
      selector: '#toolbar-container' + this.editorKey,
      config: {},
      mode: 'default', // or 'simple'
    })
    this.editor = editor;
  },
  methods: {
    setHtml(content = '') {
      this.editor.setHtml(content)
    }
  }
}

</script>

<template>
  <div :id="'editor—wrapper' + editorKey" class="editor—wrapper">
    <div :id="'toolbar-container' + editorKey" class="toolbar-container"><!-- 工具栏 --></div>
    <div :id="'editor-container' + editorKey" class="editor-container"><!-- 编辑器 --></div>
  </div>
</template>

<style scoped>
@import '@wangeditor/editor/dist/css/style.css';

.editor—wrapper {
  border: 1px solid #ccc;
  z-index: 100; /* 按需定义 */
}

.toolbar-container {
  border-bottom: 1px solid #ccc;
}

.editor-container {

}
</style>
